<!DOCTYPE html> 
<html>
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Hello, World</title> 
<style type="text/css"> 
html{height:100%} 
body{height:100%;margin:0px;padding:0px} 
#container{height:100%} 

</style> 
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=pmlWYKP930WSsPmGO3kAfDANIsHmlxp6">
</script>
</head> 
  
<body> 
<div id="container"></div>
<script type="text/javascript">
var map = new BMapGL.Map("container");
// 创建地图实例 
// 114.301865,29.863106    统计局坐标
var point = new BMapGL.Point(114.301865,29.863106);
// 创建点坐标 


map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

map.setHeading(0);   //设置地图旋转角度
map.setTilt(40);       //设置地图的倾斜角度

// map.setMapType(BMAP_EARTH_MAP);      // 设置地图类型为地球模式

// var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
// map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
map.addControl(zoomCtrl);   

// var opts = {offset: new BMapGL.Size(150, 5)}
// map.addControl(new BMapGL.ScaleControl(opts));   //添加控件位置设置

var marker = new BMapGL.Marker(point);        // 创建标注   
map.addOverlay(marker);                     // 将标注添加到地图中

// var path = [[114.301865,29.863106],[100,40],[120,35]]

// var prism = new BMapGL.Prism(path, 5000, {
//     topFillColor: '#5679ea',
//     topFillOpacity: 0.5,
//     sideFillColor: '#5679ea',
//     sideFillOpacity: 0.9
// });
// map.addOverlay(prism);

var content = "这是咸安区统计局 离我家很近";
var label = new BMapGL.Label(content, {       // 创建文本标注
    position: point,                          // 设置标注的地理位置
    offset: new BMapGL.Size(20, -40)           // 设置标注的偏移量
})  
map.addOverlay(label);                        // 将标注添加到地图中
label.setStyle({                              // 设置label的样式
    color: '#3e3e',
    fontSize: '30px',
    border: '2px solid #1E90FF',
    boxShadow:'3px 3px red'
})

// var opts = {
//     width: 250,     // 信息窗口宽度
//     height: 100,    // 信息窗口高度
//     title: "message"  // 信息窗口标题
// }
// marker.onclick = function(){
//     var infoWindow = new BMapGL.InfoWindow("this is my home", opts);  // 创建信息窗口对象
// map.openInfoWindow(infoWindow, map.getCenter());        // 打开信息窗口
// }


// map.setTrafficOn();                              // 添加交通流量图层

map.centerAndZoom(point, 20);
//级别越高放大层度越高
// 初始化地图，设置中心点坐标和地图级别 

// var txtMenuItem = [
//         {
//             text:'放大',                             // 定义菜单项的显示文本
//             callback: function () {                 // 定义菜单项点击触发的回调函数
//                 map.zoomIn();
//             }
//         },
//         {
//             text:'缩小',
//             callback: function () {
//                 map.zoomOut();
//             }
//         }
//     ];
// for(var i = 0; i < txtMenuItem.length; i++){
//     menu.addItem(new BMapGL.MenuItem(               // 定义菜单项实例
//         txtMenuItem[i].text,                        // 传入菜单项的显示文本
//         txtMenuItem[i].callback,                    // 传入菜单项的回调函数
//         {
//             width: 300,                             // 指定菜单项的宽度
//             id: 'menu' + i                          // 指定菜单项dom的id
//         }
//     ));
// }
// map.addContextMenu(menu);                           // 给地图添加右键菜单

var keyFrames = [
    {
        center: new BMapGL.Point(114.301865,29.863106),     // 定义第一个关键帧帧地图中心点
        zoom: 18,                                      // 定义第一个关键帧地图等级
        tilt: 60,                                      // 定义第一个关键帧地图倾斜角度
        heading: 0,                                    // 定义第一个关键帧地图旋转方向
        percentage: 0                                  // 定义第一个关键帧处于动画过程的百分比，取值范围0~1
    },
    {
        center: new BMapGL.Point(14.304341,29.875502),     // 定义第二个关键帧地图中心点
        zoom: 18,                                      // 定义第二个关键帧地图等级
        tilt: 60,                                      // 定义第二个关键帧地图倾斜角度
        heading: 180,                                  // 定义第二个关键帧地图旋转方向
        percentage: 0.5                                // 定义第二个关键帧处于动画过程的百分比，取值范围0~1
    },
    {
        center: new BMapGL.Point(114.2857,29.873925),     // 定义第三个关键帧地图中心点
        zoom: 18,                                      // 定义第三个关键帧地图等级
        tilt: 60,                                      // 定义第三个关键帧地图倾斜角度
        heading: 360,                                  // 定义第三个关键帧地图旋转方向
        percentage: 1                                  // 定义第三个关键帧处于动画过程的百分比，取值范围0~1
    }
] ;

var opts = {
    duration: 10000,     // 设置每次迭代动画持续时间
    delay: 3000,         // 设置动画延迟开始时间
    interation: 2        // 设置动画迭代次数
};

var animation = new BMapGL.ViewAnimation(keyFrames, opts);        // 初始化动画实例
animation.addEventListener('animationstart', function(e) {        // 监听动画开始事件
    console.log('start');
});
animation.addEventListener('animationiterations', function(e) {   // 监听动画迭代事件
    console.log('onanimationiterations');
});
animation.addEventListener('animationend', function(e) {        // 监听动画结束事件
    console.log('end');
});
animation.addEventListener('animationcancel', function(e) {       // 监听动画中途被终止事件
    console.log('cancel');
});

map.startViewAnimation(animation);         // 开始播放动画
</script> 
</body> 
</html>